<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <button onclick="set()">延迟弹框</button>
    <button onclick="cancle()">取消延迟</button>
    <button onclick="setnum()">周期执行按钮计数</button>
    <button onclick="canclenum()">取消计数</button>
    <div class="box" onclick="move(this)"></div>
    <script>
        // // 基本类型(5种)
        // var num = 100;
        // var num2 = num;
        // num2 = 200;

        // 传参
        // 传地址
        var objx = {age:30};
        function fn1(obj){
            obj.age = 50;
        }
        fn1(objx);
        console.log(objx);  //{age: 50}

        //值传递
        var a = 100;
        function fn2(a){
            console.log(a); //100
            a = 200;
            console.log(a);  //200
        }
        fn2(a)
        console.log(a);  //100 全局变量也不改变原值

        var b = 100;
        function fn3(b){     //参数的赋值是在函数代码之情之前最开始
            console.log(b); //100
            var b = 200;
            console.log(b); //200 局部变量
        }
        fn3(b)
        console.log(b); //100 


        // 引用类型(对象、数组、函数)，存的是地址
        var arr = [1,2,3];
        console.log(arr);
        var obj = {age:30}
        var obj2 = obj; //obj2==obj
        console.log(obj == obj2); //true
        obj2.age = 50;
        console.log(num);
        console.log(obj.age);  //50

        // 判等
        var obj = {age:30}
        var obj2 = {age:30}
        console.log(obj==obj2); //两个不同的地址 false


        // 变量提升，预解析过程
        // 1、全局先找var function 关键字，将变量提升
        // 然后再逐行执行代码
        // 遇到函数调用会在函数内再次进行预解析
        console.log(a);  
        var a = 100; 
        // var a; console.log(a);  a = 100; 
        function fn(){
            console.log(a); //undefined
            var a = 200;  //a = 200 局部变量
            console.log(a); //200
        }
        fn()
        console.log(a); //100全局变量

        // 有形参没传 undefined 只声明不赋值 也是 数组只有三个 arr[8] undefined
        
        // // 错误写法 
        // ①
        // f();
        // var f = function(){
        //     console.log(qoo);
        // }  //不能先调用在声明 因为开始是是undefined 

        // ②
        // // 将变量提升  var a; a(); 提升为函数; 
        // // 然后再逐行执行代码 a = 100; a(); 调用会报错 因为已经赋值100了
        // 错误写法
        // var a = 100;
        // a();   //会报错 
        // function a(){
        //     console.log(100);
        // }
        // 正确写法
        var co;
        co();   // 打印函数的结果
        function co(){
            console.log(100);
        }


        var arr = [9,5,8,4,6];
        // 数组的绝大部分方法都是对原数组进行了改变
        var arr2 = arr.sort();
        console.log(arr2);
        var arr3 = arr.reverse();
        console.log(arr);
        console.log(arr2);
        console.log(arr3); //arr=arr2=arr3

        // concat slice forEach 对原数组没有改变
        var arr = [9,5,8,4,6];
        var a = arr.slice(2);
        var b = arr.concat(100,200);
        console.log(a);
        console.log(b);
        console.log(arr);



        //BOM（Browser Object  Model）
        // 浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。
        // 这些对象并不是独立存在的，对象与对象之间存在着层次结构，
        // 对象模型的作用就是描述这些层次结构。

        //  window 对象表示整个浏览器窗口

        // 一、系统对话框设置
        // ①警告框——alert()
        // window.alert(‘你确定要关闭此窗口吗？’); 一个确定按钮

        // ②确认窗口——confirm()
        // window.confirm(‘你确定要关闭此窗口吗？’); 确定+取消按钮

        // ③输入框——prompt()
        // window.prompt(message, [default]); 确定+取消+输入框
        // message 为要在提示框中显示的文本内容   
        // default 为单行文本框中的默认内容

        // confirm('sssss');
        var res = confirm('zp');
        console.log(res); //确定是true 取消是false

        // prompt('请选择你爱的人','宋林溪'); //,后面是默认值;确定是true 取消是false
        var res = prompt('请选择你爱的人','宋林溪');  
        console.log(res); //输入内容 返回输入的内容 点击取消后会返回null

        // 二、延迟执行、周期性操作 设置
        // ①延迟执行
        // setTimeout()  延迟执行 只执行一次
        // clearTimeout(id) 取消延迟执行 ——id是setTimeout()方法返回的数字
        // 点击延迟弹框按钮 延迟弹出prompt(输入框)
        var timer;
        function set(){
            timer = setTimeout(function(){
                var res = prompt('请选择你爱的人');  
                console.log(res);
            },3000)
            console.log(timer);
        }       
        // 点击取消按钮不在执行
        function cancle(){  
            clearTimeout(timer);   // 取消延迟执行
        }
        // ②周期执行
        // setInterval( ) 周期执行 重复执行，直到 clearInterval() 被调用或窗口被关闭
        // clearInterval(id) 取消周期执行  id是setInterval() 方法返回的数字      
        //点击周期执行计数按钮开始计数
        var timeId;
        function setnum(){
            var num = 0;
            timerId = setInterval(function(){
                console.log(++num);  //num从1开始计数
                // console.log(timerId) //默认一直是1
            },1000)
        }
        // 点击取消按钮取消计数
        function canclenum(){
            clearInterval(timerId);
        }

        // 实际应用——box移动问题

        // var num = 100;
        // function move(that){
        //     var timeId = setInterval(function(){
        //         that.style.width = ++num + 'px';
        //     },50)  //点了好几次则开好几个定时器 故点的次数越多，长度变得越来越快
        // }  

        // 一次点击开始移动 下一次点击不在移动
        var num = 100;
        var isMove = false; //初始状态：不动（只有两个状态动:true 不动:false）
        var timeId;
        function move(that){
            if(isMove){   //isMove==true 则点击实现不动 取消定时器
                clearInterval(timeId);
                // isMove = true;
            }else{   //isMove==false 不动 点击动
                timeId = setInterval(function(){    //局部变量的话 if(isMove){clearInterval(timeId);}undifined timeId = setInterval(function(){if(isMove){clearInterval(timeId);}undifined  that.style.width = ++num + 'px';},50) 和第一个if语句不相同
                    that.style.width = ++num + 'px';  
                },50) 
                // isMove = true;
            }
            isMove = !isMove; 
        }  

        // 浏览器窗口的打开和关闭
        // 窗口操作
        // window.open( url,name,features,replace )
        // window.close( )   
    </script>
</body>
</html>